<template>
  <div class="circuit-box">
    <div class="circuit-head">
      <div class="title">
        <span>线路管理 / 线路详情</span>
        <div class="right">
          状态： {{ statusText }}
          <span
            v-if="statusText == '待上架'"
            class="button"
            @click="
              ($refs.detailsbox.style.filter = 'blur(2px)'),
                (putaway = true),
                (submit = true)
            "
            >上架</span
          >
          <!-- // 下架 -->
          <span
            v-if="statusText == '已上架'"
            class="button"
            @click="
              ($refs.detailsbox.style.filter = 'blur(2px)'),
                (upsoldout = true),
                (submit = true)
            "
            >下架</span
          >
          <!-- 价格设置 -->

          <span v-if="detailsData.principal_name == 0" class="button"
            >价格设置</span
          >
          <span
            v-if="detailsData.principal_name == 0"
            class="button"
            @click="
              ($refs.detailsbox.style.filter = 'blur(2px)'),
                (showGuide = true),
                (submit = true)
            "
            >导游设置</span
          >
          <span class="button">编辑</span>
        </div>
      </div>
    </div>

    <div class="circuit-body" ref="detailsbox">
      <!-- 左侧 -->
      <div class="circuit-details">
        <div>
          <span>线路名:</span>
          <span>{{ detailsData.route_title }}</span>
        </div>
        <div>
          <span>目的地:</span>
          <span>{{ detailsData.destination }}</span>
        </div>
        <div>
          <span>线路类型:</span>
          <span>{{ detailsData.category }}</span>
        </div>
        <div>
          <span>出游天数:</span>
          <span>{{ detailsData.days }}</span>
        </div>
        <div v-if="detailsData.principal_name == 0">
          <span>价格:</span>
          <span>{{ detailsData.agency_price | currecy }}</span>
        </div>
        <!-- 分销代理价 -->
        <div v-if="detailsData.principal_name != 0">
          <span>代理价:</span>
          <span style="color: #07c160">{{
            detailsData.agency_price | currecy
          }}</span>
        </div>
        <!-- 分销市场参考价 -->
        <div v-if="detailsData.principal_name != 0">
          <span>市场参考价:</span>
          <span>{{ detailsData.is_has_default_guide ? "是" : "否" }}</span>
        </div>

        <div>
          <span>含默认导游:</span>
          <span>{{ detailsData.is_has_default_guide ? "是" : "否" }}</span>
        </div>

        <!-- 分销自由行 -->
        <div v-if="detailsData.principal_name != 0">
          <span>是否自由行:</span>
          <span>{{ detailsData.is_allow_other_guide ? "是" : "否" }}</span>
        </div>
        <div>
          <span>第三方导游成本:</span>
          <span>{{
            detailsData.other_guide_cost == 0
              ? "无"
              : detailsData.other_guide_cost + "元/人"
          }}</span>
        </div>
        <div v-if="detailsData.principal_name == 0">
          <span>第三方导游服务费:</span>
          <span>{{
            detailsData.other_guide_service_fee == 0
              ? "无"
              : detailsData.other_guide_service_fee + "元/人"
          }}</span>
        </div>

        <!-- 图片和视频 -->
        <div class="datacontent1">
          <!-- 第一列 -->
          <div v-for="(item, index) in detailsData.static_list" :key="index">
            <div>
              <video
                v-if="item.type == 2"
                ref="video"
                :src="item.file_url"
              ></video>
              <img v-if="item.type == 1" :src="item.file_url" alt="" />
            </div>
          </div>
        </div>
      </div>

      <!-- 给盒子设置overflow hidden -->
      <div class="simple">
        <div>
          <p>详情</p>
        </div>
        <div class="simple-view">
          <div
            v-for="(item, index) in detailsData.route_service_details_list"
            :key="index"
            :class="item.type == 1 ? 'textarea' : 'upload_div'"
            style="width: 100%"
          >
            <video
              v-if="item.type == 3"
              controls
              :src="item.content"
              width="100%"
            ></video>
            <img v-if="item.type == 2" :src="item.content" alt="" />
            <div style="font-size: 14px" v-if="item.type == 1">
              {{ item.content }}
            </div>
          </div>
        </div>
      </div>

      <div class="explain" style="width: 25.7%">
        <!-- 费用说明 -->
        <div style="width: 100%">
          <p>费用说明</p>
          <p class="box" style="width: 100%">
            <span v-if="detailsData.principal_name == 0">{{
              detailsData.other_description.expense_description
            }}</span>
            <span v-if="detailsData.principal_name != 0">{{
              detailsData.expense_description
            }}</span>
          </p>
        </div>

        <div style="width: 100%">
          <p>注意事项</p>
          <p class="box">
            <span v-if="detailsData.principal_name == 0">{{
              detailsData.other_description.precautions
            }}</span>
            <span v-if="detailsData.principal_name != 0">{{
              detailsData.precautions
            }}</span>
          </p>
        </div>

        <div style="width: 100%">
          <p>退订须知</p>
          <table id="table" border="1">
            <tr>
              <th>行程开始前</th>
              <th>可退回金额</th>
            </tr>
            <tr>
              <td>7天及以上</td>
              <td>100%</td>
            </tr>
            <tr>
              <td>4-6天</td>
              <td>
                <span v-if="detailsData.principal_name == 0">{{
                  detailsData.other_description.second_refund_scale + "%"
                }}</span>
                <span v-if="detailsData.principal_name != 0">{{
                  detailsData.second_refund_scale + "%"
                }}</span>
              </td>
            </tr>
            <tr>
              <td>2-3天</td>
              <td>
                <span v-if="detailsData.principal_name == 0">{{
                  detailsData.other_description.three_refund_scale + "%"
                }}</span>
                <span v-if="detailsData.principal_name != 0">{{
                  detailsData.three_refund_scale + "%"
                }}</span>
              </td>
            </tr>
            <tr>
              <td>1天及以内</td>
              <td>无法退款</td>
            </tr>
          </table>
        </div>
      </div>
    </div>

    <!-- 导游设置 -->
    <div v-show="showGuide" class="absolute upbox">
      <h6>导游设置</h6>
      <span
        id="wrong"
        @click="
          ($refs.detailsbox.style.filter = 'blur(0px)'),
            (showGuide = false),
            (submit = false)
        "
        >×</span
      >
      <div>
        <div>
          <span>是否自由行:</span>
          <div>
            <input type="text" />
          </div>
        </div>

        <span>自由行线路旅社不提供导游服务</span>

        <div>
          <span>开放第三方导游跟团:</span>
          <el-switch
            style="border: none"
            v-model="value"
            active-color="#13ce66"
            inactive-color="#ff4949"
          >
          </el-switch>
        </div>
        <div>
          <span>第三方导游成本:</span>
          <div>
            <input type="text" />
            <span>元/人</span>
          </div>
        </div>
        <div>
          <span>第三方导游服务费:</span>
          <div>
            <input type="text" maxlength="13" />
            <span>元/人</span>
          </div>
        </div>
        <div><span class="button">提交</span></div>
      </div>
    </div>

    <!-- 背景遮蔽层 -->
    <div v-show="submit" class="background-block"></div>

    <!-- 确认上架 -->
    <div v-if="putaway" class="absolute upputaway">
      <p class="abs_text">确认上架</p>
      <div class="checkbox">
        <span
          @click="
            ($refs.detailsbox.style.filter = 'blur(0px)'),
              (putaway = false),
              (submit = false)
          "
          >取消</span
        >
        <span
          v-if="!detailsData.principal_name"
          @click="putawayPost(detailsData)"
          >确认</span
        >
        <span
          v-if="detailsData.principal_name"
          @click="putawayPost(distribution_id)"
          >确认</span
        >
      </div>
    </div>

    <!-- 确认下架 -->
    <div v-if="upsoldout" class="absolute upputaway">
      <p class="abs_text">确认下架</p>
      <div class="checkbox">
        <span
          @click="
            ($refs.detailsbox.style.filter = 'blur(0px)'),
              (upsoldout = false),
              (submit = false)
          "
          >取消</span
        >
        <!-- 线路确定 -->
        <span
          v-if="!detailsData.principal_name"
          @click="upsoldoutPost(detailsData)"
          >确认</span
        >

        <!-- 分销的确定 -->
        <span
          v-if="detailsData.principal_name != 0"
          @click="upsoldoutPost(distribution_id)"
          >确认</span
        >
      </div>
    </div>
    <!-- <div class="absolute">
      <h6>导游设置</h6>
    </div> -->
    <!-- 价格设置 -->

    <!-- <div class="absolute">
      <h6>价格设置</h6>
      <div>
        <span>价格：</span>
        <input class="text-right" type="number" placeholder="元" />
      </div>
    </div> -->
  </div>
</template>

<script>
import "@/global-style/style.less";
import circuitdetails from "@/mixins/circuit/circuit_details.js";
import circuit_up from "@/mixins/circuit/circuit_up.js";
import { getServiceDetails, getdistriedetails } from "@/utils/method.js";

export default {
  mixins: [circuitdetails, circuit_up],
  data() {
    return {
      // 弹窗处理
      value: false, // 导游switch
      showGuide: false, // 导游设置
      submit: false, // 背景
      upsoldout: false, // 下架
      putaway: false, // 上架
      distribution_id: 0,
    };
  },
  // 获取详情数据
  beforeMount() {
    let data = window.localStorage.getItem("circuitDetails");
    data = JSON.parse(data);
    // console.log(data);
    if (data) {
      this.statusText = data.status_text;
      this.distribution_id = data.distribution_id;
      // 判断是分销还是 自营
      if (data.distribution_id) {
        // console.log(data.distribution_id);
        // 分销的数据处理
        getdistriedetails(data.distribution_id)
          .then((res) => {
            if (res.data.code != 0) {
              this.$message({
                message: res.data.msg,
                type: "warning",
              });
            } else {
              this.detailsData = res.data.data;
              // console.log(this.detailsData);
            }
          })
          .catch((error) => {
            this.$message.error(error.data.msg);
          });
      } else {
        // 自营的数据处理
        getServiceDetails(data.route_service_id)
          .then((res) => {
            if (res.data.code != 0) {
              this.$message({
                message: res.data.msg,
                type: "warning",
              });
            } else {
              // console.log(res);
              this.detailsData = res.data.data;
              this.detailsData.principal_name = 0;
              console.log(this.detailsData);
            }
          })
          .catch((error) => {
            this.$message.error(error.data.msg);
          });
      }
    }
  },
};
</script>

<style lang='less'>
.circuit-details {
  width: 30% !important;
  & > div {
    & > span {
      display: inline-block;
      line-height: 4.4vh;
      &:first-of-type {
        width: 40%;
        text-align: right;
      }
      &:last-of-type {
        width: 50%;
        margin-left: 10%;
        text-align: left;
      }
    }
  }
}
.box {
  height: 16vh;
  overflow: auto;
}
.box::-webkit-scrollbar {
  width: 6px;
  background-color: #f9f9ff;
  border-radius: 2em;
}
.box::-webkit-scrollbar-thumb {
  background-color: #ccc;
  border-radius: 2em;
}
.datacontent1 {
  width: 80%;
  margin: 0 auto;
  margin-top: 2vh;
  padding-left: 2.5vw;

  & > div {
    display: inline-block !important;
    margin-top: 1.2vh;
    & > div {
      margin-right: 1.6vh;
      overflow: hidden;
      width: 11vh;
      height: 10vh;
      border: 1px solid #ccc;
      border-radius: 6px;
      background-color: #dcdcdc;
      video {
        height: 100%;
        width: 100%;
      }
      img {
        height: 100%;
        width: 100%;
      }
    }
  }
}
.simple {
  position: relative;
  right: 1vw;
  width: 25% !important;
  & > div:first-child {
    text-align: left;
    text-indent: 0.5vw;
    font-size: 14px;
    margin-bottom: 1vh;
    font-weight: 550;
  }
  div.simple-view {
    height: 74vh;
    padding: 0 8px;
    overflow: auto;
    overflow-x: hidden;

    & > div {
      width: 21vw;
      margin-bottom: 1.8vh;
    }
    .upload_div {
      width: 21vw;
      border-radius: 6px;
      background-color: #e8e8e8;
      height: 28vh;
      display: flex;
      position: relative;
      overflow: hidden;
      text-align: center;
      box-shadow: 0px 2px 3px rgb(0 0 0 / 16%);
      display: flex;
      justify-content: center;
    }
    .textarea {
      text-align: left;
      span {
        display: block;
        padding: 0 1.1vw;
        text-indent: -1vw;
        width: 100%;
        font-size: 14px;
      }
    }
  }
  div.simple-view::-webkit-scrollbar {
    width: 8px;
    background-color: #f9f9ff;
    border-radius: 2em;
  }
  div.simple-view::-webkit-scrollbar-thumb {
    background-color: #ccc;
    border-radius: 2em;
  }
}
.explain {
  // width: 23.6% !important;
  overflow: hidden !important;
  & > div {
    margin: 1vh 0;
    text-align: left;
    font-size: 14px;
    &:first-child {
      margin-top: 0vh;
      height: 20vh;
    }
    span {
      font-weight: 500 !important;
    }
    &:nth-child(2) {
      height: 20vh;
    }
    p:first-child {
      text-align: left;
      font-size: 14px;
      font-weight: 550;
      margin-bottom: 1.4vh;
    }
  }
}
table#table {
  text-align: left;
  margin: 0 auto;
  border-collapse: collapse;
  background-color: #ffffff;
  border: 1px solid #ccc;
  font-size: 14px;
  width: 100%;
  th,
  td {
    border: 2px solid #f6f6ff;
    color: #666;
    padding: 0.4vh 1.4vh;
    padding-left: 3vh;
    height: 4vh;
  }
}
</style>